<script setup lang="ts">
import { useAttrs, useSlots } from 'vue'

defineOptions({
  name: 'ProSection',
  inheritAttrs: false,
})

const attrs = useAttrs()
const slots = useSlots()

const custom = {
  bordered: false,
  size: 'small' as any,
}
const mergedAttrs = { ...attrs, ...custom }
</script>

<template>
  <a-card
    class="pro-section"
    v-bind="mergedAttrs"
  >
    <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
      <slot :key="key" :name="key" v-bind="scoped" />
    </template>
  </a-card>
</template>

<style lang="less" scoped>
.pro-section {
  border-radius: 4px;
  border: none;
  & > .arco-card-header {
    height: auto;
    padding: 20px;
    border: none;
  }
  & > .arco-card-body {
    padding: 0 20px 20px 20px;
  }
}
</style>
